<template>
  <div class="vpt-data-view">
    <div class="vpt-data-left">
      <div class="vpt-data-wpr">
        <div class="vpt-left-item">
          <label>缺陷总数</label>
          <div>{{ addThousandsSeparator(bugData.total_num) }}</div>
        </div>
        <div class="vpt-left-item">
          <label>已解决</label>
          <div>{{ addThousandsSeparator(bugData.yjj) }}</div>
        </div>
        <div class="vpt-left-item">
          <label>解决中</label>
          <div>{{ addThousandsSeparator(bugData.jjz) }}</div>
        </div>
        <div class="vpt-left-item">
          <label>待确定</label>
          <div>{{ addThousandsSeparator(bugData.dqd) }}</div>
        </div>
        <div class="vpt-left-item">
          <label>转需求</label>
          <div>{{ addThousandsSeparator(bugData.zxq) }}</div>
        </div>
        <div class="vpt-left-item">
          <label>缺陷率</label>
          <div>{{ addThousandsSeparator(bugData.qxl) }}</div>
        </div>
      </div>
      <div class="vpt-data-bottom">
        <div class="left">
          <label>来自迭代测试</label>
          <em
            >{{ addThousandsSeparator(bugData.ddcs ? bugData.ddcs : "-") }} |
            {{ bugData.ddcszb ? bugData.ddcszb : "-" }} %</em
          >
        </div>
        <div class="right">
          <label>来自运维工单</label>
          <em
            >{{ addThousandsSeparator(bugData.ywgd ? bugData.ywgd : "-") }} |
            {{ bugData.ywgdzb ? bugData.ywgdzb : "-" }} %</em
          >
        </div>
      </div>
    </div>
    <div class="vpt-data-right">
      <div class="vpt-right-title">缺陷等级</div>
      <section class="vpt-right-content">
        <div class="vpt-right-item">
          <label>致命</label>
          <em class="zmbug">{{ addThousandsSeparator(bugData.zmbug) }}</em>
        </div>
        <div class="vpt-right-item">
          <label>严重</label>
          <em class="yzbug">{{ addThousandsSeparator(bugData.yzbug) }}</em>
        </div>
        <div class="vpt-right-item">
          <label>一般</label>
          <em class="ybbug">{{ addThousandsSeparator(bugData.ybbug) }}</em>
        </div>
        <div class="vpt-right-item">
          <label>提示</label>
          <em class="tsbug">{{ addThousandsSeparator(bugData.tsbug) }}</em>
        </div>
        <div class="vpt-right-item">
          <label>建议</label>
          <em>{{ addThousandsSeparator(bugData.jybug) }}</em>
        </div>
      </section>
    </div>
  </div>
</template>
<script setup>
import { addThousandsSeparator } from "@/utils/formatter.js";
const props = defineProps({
  bugData: { type: Object, default: () => {} },
  // options: {
  //   type: Object,
  //   default: () => {
  //     return {
  //       testData: {
  //         number: 0,
  //         rate: 0,
  //       },
  //       testLevelData: [
  //         { title: "致命", value: 0 },
  //         { title: "严重", value: 0 },
  //         { title: "一般", value: 0 },
  //         { title: "提示", value: 0 },
  //         { title: "建议", value: 0 },
  //       ],
  //       operationData: {
  //         number: 0,
  //         rate: 0,
  //       },
  //       dataList: [
  //         { title: "缺陷总数", value: 44, unit: "" },
  //         { title: "已解决", value: 44, unit: "" },
  //         { title: "解决中", value: 44, unit: "" },
  //         { title: "待确定", value: 44, unit: "" },
  //         { title: "转需求", value: 44, unit: "" },
  //         { title: "缺陷率", value: 44, unit: "%" },
  //       ],
  //     };
  //   },
  // },
});
</script>
<style lang="less" scoped>
@import url("./index.less");
</style>
